<template>
		<block >
			<view class="goods" v-for="(key, index) in goodsData" :key="index">
				<view class="goods-padding" @click="onbl">
					<view class="goods-image" @click="goDetails(key)">
						<image :src="key.gimage"></image>
					</view>
					<view class="goods-info">
						<view @click="goDetails(key)" class="goods-info-text">
							<view class="goods-info-title">{{key.gtitle}}</view>
							<view class="goods-info-price">￥{{key.gpriceNow}}</view>
						</view>
						<view class="iconfont icon-gouwuche"
						 @click="onShopping(key)"
						 ></view>
					</view>
				</view>
			</view>
		</block>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
	props: {
		cart: {
			type: Boolean,
			default: true
		},
		goodsData: {
			type: Array
		}
		
	},
	data() {
		return {
		};
	},
	onLoad() {
	},
	computed: {
	},
	methods: {
		...mapActions([
			'setGoods',
			'setGoodsCart'
		]),
		onShopping(key) {
			this.setGoodsCart(key)
			this.$http.getGoodsCartAdd({
				id: key.gid
			}).then(e => {
				console.log(e)
				if (e.data.msg === "OK") {
					uni.showToast({
						title: '添加购物车成功',
						duration: 2000
					})
					return
				}
				uni.showToast({
					title: '添加购物车失败',
					duration: 2000
				})
			})
		},
		goDetails (key) {
			this.setGoods(key)
			uni.navigateTo({
				url: '/pages/store/details/index'
			});
		}
	}
};
</script>

<style scoped lang="scss">
$color: #7e7e7e;
image {
	width: 100%;
	height: 100%;
}
.goods {
	width: 355upx;
	margin-bottom: 20upx;
	border-radius: 20upx;
	background-color: #fff;
	&-padding {
		padding: 20upx 30upx;
	}
	&-image {
		width: 240upx;
		height: 240upx;
		padding: 30upx 0 20upx 0; 
		text-align: center;
		margin: auto;
	}
	&-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-title {
			font-size: 24upx;
			text-overflow:ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}
		&-text {width: 80%;}
		&-price {
			margin-top: 10upx;
			font-size: 20upx;
			color: #F82B2B;
		}
		.icon-gouwuche {
			color: $color;
		}
	}
}
</style>
